<template>
  <div id="container">
    <el-form
      :model="ruleForm"
      :rules="rules"
      ref="ruleForm"
      label-width="120px"
      class="demo-ruleForm"
    >
      <el-form-item label="输入搜索" prop="name">
        <el-input
          placeholder="请输入用户昵称或者手机号"
          v-model="ruleForm.name"
        ></el-input>
      </el-form-item>
      <el-form-item label="上次消费时间" required>
        <el-form-item prop="date1">
          <el-date-picker
            type="date"
            placeholder="开始日期"
            v-model="ruleForm.date1"
            style="width: 150px"
          ></el-date-picker>
        </el-form-item>
        <el-form-item>—</el-form-item>
        <el-form-item prop="date2">
          <el-date-picker
            type="date"
            placeholder="结束日期"
            v-model="ruleForm.date2"
            style="width: 150px"
          ></el-date-picker>
          <!-- <el-time-picker placeholder="结束日期" v-model="ruleForm.date2" style="width: 100%;"></el-time-picker> -->
        </el-form-item>
      </el-form-item>
      <el-form-item class="button">
        <el-button type="primary" @click="submitForm('ruleForm')"
          >查询</el-button
        >
        <el-button @click="resetForm('ruleForm')">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      ruleForm: {
        name: "",
        date1: "",
        date2: "",
      },
      rules: {
        name: [{ required: true, message: "请输入搜索内容", trigger: "blur" }],
        date1: [
          {
            type: "date",
            required: true,
            message: "请选择日期",
            trigger: "change",
          },
        ],
        date2: [
          {
            type: "date",
            required: true,
            message: "请选择日期",
            trigger: "change",
          },
        ],
      },
    };
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          alert("submit!");
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
  },
};
</script>

<style lang ='less' scoped>
#container {
  width: 100%;
  height: 65px;
  background-color: white;
  padding-top: 22px;
  box-sizing: border-box;
  /deep/.el-input {
    /* display: inline-block; */
    width: 202px;
    height: 32px;
  }
  .el-form-item {
    float: left;
    margin: 0;
  }
  .button {
    transform: translateX(-40%);
  }
}
</style>